<template>
  <div class="app-container customer-div">
      <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="wait">待我确认</el-menu-item>
          <el-menu-item index="myCharge">我负责的</el-menu-item>
          <el-menu-item index="all" v-if="allPickUpList">全部</el-menu-item>
          <el-menu-item index="wlqr" v-if="allPickUpList">待物流确认</el-menu-item>
      </el-menu>

    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="供应商：">
          <el-input v-model="listQuery.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="提货时间：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.tOrderTime"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="提货状态：" >
            <el-select v-model="listQuery.tOrderState" class="input-width" style="width:195px" placeholder="请选择" clearable>
                <el-option :value="item.orderState" :label="item.text" :key="item.orderState" v-for="item in stateList"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="车牌号：">
            <el-input v-model="listQuery.driverCardNo"></el-input>
        </el-form-item>
        <el-form-item label="采购员：">
          <el-select v-model="listQuery.tUserId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
              <el-button
                      @click="handleSearchList()"
                      type="primary">
                查询
              </el-button>
            <el-button
                    @click="toAddPickUp"
                    type="primary">新建提货单
            </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-table
              v-loading="listLoading"
              :data="tableData"
              border
              style="width: 100%; margin-top: 20px">
        <el-table-column  label="提货单号" min-width="150" align="center" prop="tOrderSn">
        </el-table-column>
        <el-table-column  label="提货时间" min-width="100" align="center" prop="orderTime">
        </el-table-column>
        <el-table-column  label="供应商" min-width="150" align="center" prop="supplierName">
        </el-table-column>
          <el-table-column  label="采购订单号" min-width="150" prop="purchaseOrderSn" align="center" >
          </el-table-column>
          <el-table-column  label="司机" min-width="100" align="center" prop="driverName"></el-table-column>
          <el-table-column
                  prop="driverMobile"
                  label="司机电话"
                  align="center"
                  min-width="150">
          </el-table-column>
          <el-table-column
                  prop="driverCardNo"
                  label="车牌号"
                  align="center"
                  min-width="150">
          </el-table-column>
          <el-table-column
                  prop="takeNum"
                  label="提货数量"
                  min-width="100"
                  align="center">
              <template slot-scope="scope">
              </template>
          </el-table-column>
          <el-table-column
                  label="提货状态"
                  min-width="100"
                  align="center">
              <template slot-scope="scope">
                  {{scope.row.tOrderState | fifState}}
              </template>
          </el-table-column>

        <el-table-column
                prop="driverName"
                label="提货备注"
                min-width="150"
                align="center">
            <template slot-scope="scope">
                {{scope.row.tRemark}}
            </template>
        </el-table-column>

        <el-table-column
                label="采购员"
                min-width="100"
                align="center">
          <template slot-scope="scope">
            {{scope.row.tUserName}}
          </template>
        </el-table-column>

        <el-table-column
                min-width="100"
                fixed="right"
                label="操作"
                align="center">
          <template slot-scope="scope">
                <el-button
                        type="text"
                        size="mini"
                        @click="toDetail(scope.row)">查看
                </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              :page-sizes="[10,15,20]"
              :total="count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {getTakeOrderOrderStateConfig,getOrderUsersList,takeListTakeOrder,deliverUpdate,getQiniuToken,postDeliverVoucher,exportDeliverList} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import {validateCommission} from '@/utils/validate';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  const defaultListQuery={
    pageNum: 1,
    pageSize: 10,
    tOrderTime: [],
    fromCompany: "",
    supplierName : "",
    tUserId : '',
    tOrderState : "",
    driverCardNo : "",
    tab:'wait'
  };

  export default {
    name: "index",
    data(){
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        count: 0,
        listLoading: false,
        roles:store.getters.roles ? store.getters.roles : [],
        userOptionList:[],
        stateList:[],
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),

     allPickUpList(){
        if(this.roles.indexOf("allPickUpList") != -1){
          return true
        }else{
          return false
        }
      },
    },
    created() {
      this.listQuery.tab = this.$route.query.tab ? this.$route.query.tab : 'wait';
      this.getList();
      this.getUserOptionList();
      this.getTakeOrderOrderStateList();
    },
    filters: {
        fifState(val){
            if(val == 0){
                return '待采购确认'
            }else if(val == 10){
                return '作废'
            }else if(val == 20){
                return '待财务确认'
            }else if(val == 30){
                return '待物流确认'
            }else if(val == 40){
                return '待采购二次确认'
            }else if(val == 50){
                return '待提货'
            }else if(val == 60){
                return '已提货'
            }
        },
    },
    methods:{
        //去新建提货单
        toAddPickUp(){
            let routeData = this.$router.resolve({name:'addPickUp'});
            window.open(routeData.href);
        },

        //去详情页
        toDetail(item){
            let routeData = this.$router.resolve({name:'pickUpInfo',query:{tOrderId:item.tOrderId}});
            window.open(routeData.href);
        },

        //获取提货单状态
        getTakeOrderOrderStateList(){
            getTakeOrderOrderStateConfig().then((res)=>{
                this.stateList = res;
            })
        },


      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },

      /**
       * 切换选择状态
       */
      handleSelect(key, keyPath){
        this.listQuery = JSON.parse(JSON.stringify(defaultListQuery)),
                this.listQuery.tab = key;
        this.handleSearchList();
      },
      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取提货单列表
      getList() {
        this.listLoading = true;
        let pa = JSON.parse(JSON.stringify(this.listQuery));
          if(this.listQuery.tab == 'wlqr'){
            pa.tOrderState = 30
          }
          takeListTakeOrder(pa).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },
    },
  }
</script>

<style lang="scss">
    .cspantd{
        padding:0 !important;
        .cell{
            padding:0 !important;
            .tdDiv{
                padding:5px 10px;
                min-height: 20px;
                line-height: 20px;
                box-sizing: content-box;
            }
        }
    }
</style>
